import React from 'react';
import { withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import { Tools, SearchBar, Avatar } from 'weaver-mobile';
import { ListViewPage } from 'weaver-mobile-page';
import { renderNoData } from '../../public/BlogUtils';
import HisBlogRoute from '../../hisBlog/HisBlogRoute';
import AttentionTool from '../../public/AttentionTool';
import NewAttentionTool from "../../public/NewAttentionTool";
const getLabel = Tools.getLabel;
@inject('blogAttentionStore')
@withRouter
@observer
export default class ShareToMe extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-center-attention-share'
  }

  constructor(props) {
    super(props);
    this.state={
      path: props.parentPath + "/hisBlog/",
      userId: '',
    }
    this.updateUserAttentionStatus = this.updateUserAttentionStatus.bind(this);
  }

  componentDidMount() {
    const { blogAttentionStore: { shareToMeStore } } = this.props;
    shareToMeStore.getMyAttentionShare();
  }

  componentWillUnmount(){
    const { blogAttentionStore: { shareToMeStore} } = this.props;
    shareToMeStore.shareToMeClear();
  }

  updateUserAttentionStatus(attnInfo) {
    const { blogAttentionStore: { shareToMeStore } } = this.props;
    shareToMeStore.updateUserAttentionStatus(attnInfo);
  }

  getTemplate = () => {
    const listStyle = 'blog-list-line';
    const newTemp = {
      default: [{
        key: 'col_1',
        render: (data) => {
          const { imageUrl, lastname, departmentName, jobtitle, islower, userId, attentionStatus, isreceive ,specialStatus} = data;
          return (
            <div className={listStyle}>
              <div className={`${listStyle}-userInfo`}>
                <Avatar userId={userId} style={{width:40, height:40}} />
                <div className={`${listStyle}-userInfo-content`}>
                  <span className='lastName text-wrap'>{lastname}</span>
                  <span className='departmentName text-wrap'>{departmentName}&nbsp;{jobtitle}</span>
                </div>
              </div>
              <div className={`${listStyle}-ops`}>
                <AttentionTool 
                  isreceive={isreceive} 
                  attentionStatus={attentionStatus} 
                  userId={userId}
                  islower={islower}
                  callback={this.updateUserAttentionStatus}
                />
              </div>
                <NewAttentionTool
                    isreceive={isreceive}
                    attentionStatus={attentionStatus}
                    specialStatus={specialStatus}
                    userId={userId}
                    islower={islower}
                    callback={this.updateUserAttentionStatus}
                />
            </div>
          )
        }
      }]
    }
    return newTemp;
  }


  render() {
    const { prefixCls, blogAttentionStore: { shareToMeStore } } = this.props;
    const { shareToMeList, getShareToMeListNextPage, getShareToMeListRefresh, shareToMeSearch, noData } = shareToMeStore;

      return noData ? <div className={prefixCls}><SearchBar
          placeholder = {getLabel(500351,'请输入关键字')}
          onSubmit={shareToMeSearch}
      /> {renderNoData}</div> : (
      <div className={prefixCls}>
        <SearchBar
          placeholder = {getLabel(500351,'请输入关键字')}
          onSubmit={shareToMeSearch}
        />
        <ListViewPage.Normal
          store={shareToMeList}
          getDataCustom
          getTemplate={this.getTemplate}
          customHeight='100%'
          rowKey='userId'
          onEndReachedThreshold={500}
          onEndReached={getShareToMeListNextPage} 
          onRefresh={getShareToMeListRefresh}
          onRowClick={(rowData) => {
            this.setState({ userId: rowData.userId }, () => {
              this.props.history.push(this.state.path + rowData.userId);
            });
          }}
        />
        <HisBlogRoute path={this.state.path} userId={this.state.userId}/>
      </div>
    )
  }
}
